<template>
    <div class="dialog">
      <div class="mask"></div>
      <div class="dialog-content">
        <h3 class="title">{{ modal.title }}  <span class="pull-right" @click="cancel">&times;</span></h3>
        <div class="modalContent">
          <div class="row">
            <div class="col-md-3 col-xs-3 advice">医嘱号 ：</div>
            <div class="col-md-8 col-xs-8 advice">{{modal.Data.ID_Order}}</div>
            </div>

            <div class="row">
              <div class="col-md-3 col-xs-3 advice">开立时间 ：</div>
              <div class="col-md-8 col-xs-8 advice">{{modal.Data.Time_Start | filterDateT}}</div>
            </div>

            <div class="row">
              <div class="col-md-3 col-xs-3 advice">停止时间 ：</div>
              <div class="col-md-8 col-xs-8 advice">{{modal.Data.Time_Stop | filterDateStop}}</div>
            </div>

            <div class="row">
              <div class="col-md-3 col-xs-3 advice">途径 ：</div>
              <div class="col-md-8 col-xs-8 advice">{{modal.Data.Usage}}</div>
            </div>

            <div class="row">
              <div class="col-md-3 col-xs-3 advice">属性 ：</div>
              <div class="col-md-8 col-xs-8 attribute advice">
                <span>{{modal.Data.Type}}</span>
                <span>{{modal.Data.ValidFlag}}</span>
                <span>{{modal.Data.ExecutingState}}</span>
              </div>
            </div>

            <div class="row">
              <div class="col-md-3 advice" style="text-align: left;">医嘱内容 ：</div>
              <div class="col-md-9 adviceName" v-html="msg(modal.Data.Name)">
              </div>
            </div>
          <!-- </div>  -->
        </div>
        <!--<div class="btn-group">
          <div class="btn" @click="cancel">{{ modal.cancelButtonText }}</div>
          <div class="btn" @click="submit">{{ modal.confirmButtonText }}</div>
        </div>-->
      </div>
    </div>
</template>
<script>

  export default {
    name: 'dialog',
    props: {
      dialogOption: Object
    },
    data() {
      return {
        resolve: '',
        reject: '',
        promise: '', // 保存promise对象
      }
    },
    computed: {
      modal: function () {
        let options = this.dialogOption;
        return {
          title: options.title || '提示',
          Data: options.Data,
          //cancelButtonText: options.cancelButtonText ? options.cancelButtonText : '取消',
          //confirmButtonText: options.confirmButtonText ? options.confirmButtonText : '确定',
        }
      }
    },
    methods: {
      ////确定,将promise断定为完成态
      //submit() {
      //  this.resolve('submit');
      //},
      // 取消,将promise断定为reject状态
      cancel() {
        this.reject('cancel');
      },
      //显示confirm弹出,并创建promise对象，给父组件调用
      confirm() {
        this.promise = new Promise((resolve, reject) => {
          this.resolve = resolve;
          this.reject = reject;
        });
        return this.promise; //返回promise对象,给父级组件调用
      }
    },
    filters: {
      filterDateStop(str) {
        if (!str || str == '1900-01-01T00:00:00') {
          return '';
        } else {
          return str.replace('T', ' ');
        }
      },
    }

  }
</script>
<style scoped>
  .dialog {
    position: relative;
  }
  .dialog-content {
    position: fixed;
    box-sizing: border-box;
    width: 520px;
    min-height: 500px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    background: #fff;
    z-index: 50002;
  }
  .title {
    font-size: 18px;
    line-height: 50px;
    height: 50px;
    background-color: #11a7f3;
    padding-left:20px;
    color:#fff;
  }
  .title>span{
    display:block;
    width:50px;
    height:50px;
    line-height:50px;
    text-align:center;
    font-size:25px;
    color:#fff;
  }
 
  .modalContent {
    padding: 20px;
  }
  .advice {
    height: 30px;
    line-height: 30px;
    text-align: right;
    margin-bottom: 10px;
  }
  .col-md-8, .col-md-9{
    text-align: left;
    padding-left: 5px;
  }
  .attribute span{
    display:inline-block;
    margin-right:10px;
    color:#02bb96;
  }
    .attribute span:nth-child(2) {
      color: #DDA000;
    }
    .attribute span:nth-child(3) {
      color: #F44336;
    }
    .attribute span:after {
      content: '';
      display: inline-block;
      width: 1px;
      height: 20px;
      background-color: #ccc;
      margin-left: 15px;
      vertical-align: middle;
    }
  .col-md-3{
    width:110px;
    color:#666;
    padding-right:0;
  }
  .adviceName {
    line-height: 30px;
  }
  .attribute span:last-child:after {
    width: 0;
  }
    .mask {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 50001;
      background: rgba(0,0,0,.5);
    }
  @media screen and (max-width: 768px) {
      .col-md-3{
        /* width: auto; */
      }
  }
@media screen and (max-width: 576px) {
  .dialog-content {
    position: fixed;
    box-sizing: border-box;
    width: 90%;
    min-height: 350px;
    top: 50%;
  }
  .adviceName{
    padding-left: 15px;
  }
  .modalContent{
    padding: 15px 10px;
  }
}
@media screen and (max-width: 375px) {
      .col-md-3{
        width: auto;
      }
  }
</style>
